/**
 * 组件名称：步骤条组件
 * 使用场景：指示步骤，仅此而已，无任何逻辑
 * 功能介绍：不再需要每个页面都展示StepperStep了
 * 功能进度：100%
 * 待办事项：无
 */

import React from "react";
import {Stepper, StepperStep} from "@mantine/core";

interface stepProps {
  label: string;
  description: string;
}

interface steppersProps {
  steps: stepProps[];
  activeNum: number;
}

export const StepperIndicator = ({activeNum, steps}: steppersProps) => {
  return (
    <Stepper size="sm" radius="lg" active={activeNum}>
      {steps.map((item) => (
        <StepperStep
          key={item.label}
          label={item.label}
          description={item.description}
        ></StepperStep>
      ))}
    </Stepper>
  );
};
